// @ts-nocheck
import React, { } from 'react'
import {  useNavigate } from 'react-router-dom'
import {
  Form,
  Input,
  Button,
  message
} from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import logo from '../../assets/images/logo.png'
import './index.less'
import { reqLogin } from '../../api/api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'



export default function Login() {

  const navigate = useNavigate ()

  React.useEffect (() => {
     // 如果用户已经登录，自动跳转admin
    
  })

  // 提交表单 登陆
   const  onFinish = async (value) => {
    try {
      const result = await reqLogin (value)
      if (result.status === 0) {
        message.success ('登陆成功')
        const user = result.data
        // 保存到内存中
        memoryUtils.user = user
        // 保存到本地
        storageUtils.saveUser (user)

        navigate ('/',{replace: true})
      } else if (result.status ===1 ) {
        message.error (result.msg)
      }
    } catch (err) {
      // message.error (err)
      message.error (err.message)
    }
     
  }

  return (
    <div className='login'>
      <header className='login-header'> <img src={logo} alt="logo" />
        <h1>React 项目: 后台管理系统</h1>
      </header>
      <section className='login-content'>
        <h3>用户登陆</h3>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
              {
                min: 4,
                message: '用户名至少四位',
              },
              {
                max: 12,
                message: '用户名最多12位',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
              {
                min: 4,
                message: '密码至少四位',
              },
              {
                pattern: /^[a-zA-Z0-9_]+$/,
                message: '密码为数字字母下划线',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          
          <Form.Item
            name="confirm"
            dependencies={['password']}
            rules={[
              {
                required: true,
                message: 'Please confirm your password!',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('The two passwords that you entered do not match!'));
                },
              }),
            ]}
          >
            <Input type="password"
              placeholder=" Confirm Password"></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>

        </Form>
      </section>
    </div>
  )
}